<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	
	const loading = ref(false)
	
	function start() {
		uni.navigateTo({
			url: '/pages/game/rich/game'
		})
	}
	function exit() {
		uni.navigateBack({
			fail: () => {
				uni.switchTab({url: '/pages/tabbar/index'})
			}
		})
	}
	
	onLoad(() => {
		
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<view class="head-title">
				<uv-image src="/static/game/rich/title.png" width="312" height="68"></uv-image>
			</view>
		</view>
		<view class="app-content">
			<view class="start" @click="start">开 始 游 戏</view>
			<view class="exit" @click="exit">退 出 游 戏</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		background-image: url('/static/game/rich/start-bg.png');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		.app-head {
			padding-top: 440rpx;
			display: flex;
			justify-content: center;
			animation: bounce-in-top 3s;
			.head-title{
				animation: jello-horizontal 2s 3s infinite alternate;
			}
		}
		.app-content{
			padding-top: 440rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 72rpx;
			font-weight: 600;
			font-size: var(--theme-xl);
			line-height: var(--theme-xl-line);
			.start{
				color: #FFFFFF;
				animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			}
			.exit{
				color: #82848a;
				animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
			}
		}
		@keyframes bounce-in-top {
			0% {
				transform: translateY(-500px);
				animation-timing-function: ease-in;
				opacity: 0;
			}
			38% {
				transform: translateY(0);
				animation-timing-function: ease-out;
				opacity: 1;
			}
			55% {
				transform: translateY(-65px);
				animation-timing-function: ease-in;
			}
			72% {
				transform: translateY(0);
				animation-timing-function: ease-out;
			}
			81% {
				transform: translateY(-28px);
				animation-timing-function: ease-in;
			}
			90% {
				transform: translateY(0);
				animation-timing-function: ease-out;
			}
			95% {
				transform: translateY(-8px);
				animation-timing-function: ease-in;
			}
			100% {
				transform: translateY(0);
				animation-timing-function: ease-out;
			}
		}
		@keyframes jello-horizontal {
			0% {
				transform: scale3d(1, 1, 1);
			}
			30% {
				transform: scale3d(1.25, 0.75, 1);
			}
			40% {
				transform: scale3d(0.75, 1.25, 1);
			}
			50% {
				transform: scale3d(1.15, 0.85, 1);
			}
			65% {
				transform: scale3d(0.95, 1.05, 1);
			}
			75% {
				transform: scale3d(1.05, 0.95, 1);
			}
			100% {
				transform: scale3d(1, 1, 1);
			}
		}
		@keyframes text-pop-up-top {
			0% {
				transform: translateY(0);
				transform-origin: 50% 50%;
				text-shadow: none;
			}
			50% {
				transform: translateY(50px);
				transform-origin: 50% 50%;
				text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
			}
			100% {
				transform: translateY(0);
				transform-origin: 50% 50%;
				text-shadow: none;
			}
		}
		@keyframes text-focus-in {
			0% {
				filter: blur(12px);
				opacity: 0;
			}
			100% {
				filter: blur(0px);
				opacity: 1;
			}
		}
		@keyframes tracking-in-expand {
			0% {
				letter-spacing: -0.5em;
				opacity: 0;
			}
			40% {
				opacity: 0.6;
			}
			100% {
				opacity: 1;
			}
		}
	}
</style>